<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>患者列表</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../../js/layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../../js/layuiadmin/style/admin.css" media="all">
</head>
<body>

  <!-- <div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
      <a lay-href="">主页</a>
      <a><cite>组件</cite></a>
      <a><cite>数据表格</cite></a>
      <a><cite>开启头部工具栏</cite></a>
    </div>
  </div> -->
  <!--添加患者信息-->
<script type="text/html" id="editDialog">
  <form class="layui-form" action="" style="padding: 20px;" lay-filter="editDialogForm">
      <div class="layui-form-item">
          <input type="hidden" name="id" placeholder="标识" class="layui-input" >
          <label class="layui-form-label">患者标识</label>
          <div class="layui-input-inline">
              <input type="text" name="patient_id" lay-verify="patient_id" placeholder="患者标识" autocomplete="off" class="layui-input">
          </div>
      </div>
      <div class="layui-form-item">
          <label class="layui-form-label">患者名称</label>
          <div class="layui-input-inline">
              <input type="text" name="name" placeholder="患者名称" autocomplete="off" class="layui-input">
          </div>
      </div>
      <div class="layui-form-item">
          <label class="layui-form-label">单选框</label>
          <div class="layui-input-inline">
              <input type="radio" name="gender" value="1" title="男" checked>
              <input type="radio" name="gender" value="2" title="女">
          </div>
      </div>
     <div class="layui-form-item">
    <label class="layui-form-label">年龄</label>
    <div class="layui-input-inline">
      <input type="text" name="age" placeholder="年龄" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">手机号</label>
    <div class="layui-input-inline">
      <input type="text" name="phone_number"  autocomplete="off" class="layui-input" id="phone_number_random">
    </div>
  </div>
  </form>
</script>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
      <div class="layui-col-md12">
        <div class="layui-card">
          <!-- <div class="layui-card-header">开启头部工具栏</div> -->
          <div class="layui-card-body">
            <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>
            
            <script type="text/html" id="test-table-toolbar-toolbarDemo">
              <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="add">添加患者</button>
              </div>
            </script>
            <script type="text/html" id="table-patient-toolbar">
              <a class="layui-btn layui-btn-xs" lay-event="detail">AI评估</a>
              <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
            </script>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../../../js/jquery.min.js"></script>
  <script src="../../../js/layuiadmin/layui/layui.js"></script>  
  <script>
  layui.config({
    base: '../../../js/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table','form'], function(){
    var admin = layui.admin
    ,table = layui.table
    ,form = layui.form;
    table.render({
      elem: '#test-table-toolbar'
      ,url: layui.setter.baseUrl + '/api/patients/'
      ,toolbar: '#test-table-toolbar-toolbarDemo'
      ,cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ,title: '患者信息表'
      ,cols: [[
          {fixed:'right', align: 'center', toolbar: '#table-patient-toolbar',title:'操作',width:200} //这里的toolbar值是模板元素的选择器
          ,{field: 'id', title: '标识', sort: true,width:80}
          , {field: 'patient_id', title: '患者标识',width:120}
          , {field: 'name', title: '姓名',sort: true,width:120}
          , {field: 'gender', title: '性别',templet: function(d){
                if(d.gender == 1){
                  return "男";
                } else if(d.gender == 2){
                  return "女";
                }
                return "未知";
              },width:100}
          , {field: 'age', title: '年龄',width:100}
          , {field: 'birth_date', title: '出生日期'}
          , {field: 'id_number', title: '身份证号'}
          , {field: 'phone_number', title: '手机号'}
          , {field: 'address', title: '住址',hide:true} 
        
      ]]
      ,page: true
    });
    
    //表头工具栏事件
    table.on('toolbar(test-table-toolbar)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'add':
          // var data = checkStatus.data;
          // layer.alert(JSON.stringify(data));
          layer.open({
                      type: 1,
                      title: '添加患者',
                      // area:['80%','90%'],
                      content: $('#editDialog').html(), //这里content是一个普通的String
                      btn: ['确定', '取消'],
                      success: function (index, layero) {   
                          // 表单提交事件                            
                          //弹出层加载成功处理代码
                          form.render();
                      },
                      yes: function (index, layero) {
                          
                          //获取弹出层表单数据
                          var data = form.val("editDialogForm");
                          console.log(data);
                          //提交表单数据
                          $.ajax({
                              url: layui.setter.baseUrl + '/api/add',
                              type: 'POST',
                              data: data,
                              success: function(res){
                                  console.log(res);
                                  layer.msg('添加成功');
                                  
                                  // 关闭弹窗
                                  layer.close(index); 

                                  //刷新表格数据
                                  table.reload('test-table-toolbar');
                              },
                              error: function(err){
                                  console.log(err);
                                  layer.msg('添加失败');
                              }
                          });
                          // 阻止表单跳转
                          return false;
                        
                      },
                      btn2: function (index, layero) {
                          //return false 开启该代码可禁止点击该按钮关闭
                      }
                  });
                    break;
      };
    });
    
    //监听行工具事件
    table.on('tool(test-table-toolbar)', function(obj){
      var data = obj.data;
      if(obj.event === 'del'){
        layer.confirm('真的删除行么', function(index){
          
           //向服务端发送删除指令

          // var id = data.data.id;
            // 发送删除请求到后端
            $.ajax({
              url: layui.setter.baseUrl + `/api/delete/${data.id}`, //请求地址`,
              type: 'POST',
              success: function (response) {
                  layer.msg('删除成功');

                  obj.del();
                  layer.close(index);

                  // 刷新表格数据
                  table.reload('test-table-toolbar');
              },
              error: function (error) {
                  layer.msg('删除失败');
              }
          });

        });
      } else if(obj.event === 'edit'){
        
        //do something
        layer.open({
          type: 1,
          title: '修改患者',
          // area:['80%','90%'],
          content: $('#editDialog').html(), //这里content是一个普通的String
          btn: ['确定', '取消'],
          success: function (index, layero) {
              form.render();
              form.val("editDialogForm",data);
          },
          yes: function (index, layero) {
               //获取弹出层表单数据
               var data = form.val("editDialogForm");
              console.log(data);
                                                        
              // 发送Ajax请求
              $.ajax({
                url: layui.setter.baseUrl + `/api/update/${data.id}`, //请求地址`,
                type: 'POST',
                data: data,
                success: function(response){
                  //请求成功后的操作，比如提示用户或刷新页面
                  layer.msg('修改成功');

                  // 关闭弹窗
                  layer.close(index); 
                  // 刷新表格数据
                  table.reload('test-table-toolbar');

                },
                error: function(){
                  // 请求失败后的操作
                  layer.msg('提交失败');
                }
              });
                  
                // 阻止表单跳转
                return false;

                  },
                  btn2: function (index, layero) {
                      //return false 开启该代码可禁止点击该按钮关闭
                  }
              });
      }else if(obj.event === 'detail'){
      
          // 打开AI评估页面


            // 获取当前登录用户信息
            var user = sessionStorage.getItem('user');
            if(user == null || user == "")  {
              layer.msg('模拟实现，请退出后，点击登录再次进入该页面');
              return;
            }else{
              
              var ip = "10.10.22.47";
              var port = "4030";
              var patient_id = data.patient_id;
              var user = user = JSON.parse(user);
              
          
              const url = `http://${ip}:${port}/ct_chest/patient/${patient_id}?`;

              // 创建查询参数字符串
              const queryParams = Object.entries(data)
                  .filter(([key, value]) => !['patient_id', 'id', 'address'].includes(key)) // 排除指定的字段
                  .concat(Object.entries(user)) // 添加spanValues字段
                  .map(([key, value]) => `${encodeURIComponent(key.toUpperCase())}=${value}`)
                  .join('&');

              // 打开AI评估页面
              var fullUrl = url + queryParams;
              console.log("打开AI评估页面 URL：" + fullUrl);
              // window.open(fullUrl, '_blank');
              openFullscreenWindow(fullUrl);
              
            }
      }
    });

    function openFullscreenWindow(url) {
      // 根据 URL 打开新的窗口
      var newWindow = window.open(url, '_blank', 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes');

      // 如果新窗口被成功打开
      if (newWindow && newWindow.document) {
          // 发送消息给新窗口
          newWindow.postMessage({ action: 'requestFullscreen' }, '*');
      }
    }

    // 获取当前登录用户信息
    var user = sessionStorage.getItem('user');
    if(user == null || user == "")  {
      console.log('no login');
    }else{
      user = JSON.parse(user);
      console.log(user.DOCTOR_NAME+",登陆成功");
    }
  
  });
  </script>
</body>
</html>